<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/5/16 17:58
 -->
<template>
  <div class="page">
    <excel-export
      ref="excelExport"
      style="display: none"
      :filename="excel.filename"
      :sheet="excel.sheet"
      :manual="true"
      :on-error="onExportExcelError"
    ></excel-export>
    <div class="">
      <el-button type="primary" @click.stop="onExcelExport">导出excel</el-button>
    </div>
    <el-alert>https://www.npmjs.com/package/pikaz-excel-js#table-setting</el-alert>
    <g-table :data="list" border :columns="columns"></g-table>
  </div>
</template>

<script>
import { ExcelExport } from 'pikaz-excel-js'
export default {
  name: 'ComponentsExcel',
  components: { ExcelExport },
  data () {
    return {
      excel: {},
      list: [],
      columns: [
        { type: 'index', label: '序号', width: '100', align: 'center' },
        { prop: 'mc', label: '机构名称', minWidth: '150', align: 'center' },
        { prop: 'czrksl', label: '辖区内常住居民数', minWidth: '150', align: 'center' },
        {
          label: '建立电子健康档案数',
          align: 'center',
          children: [
            { prop: 'dasl', label: '本期值', minWidth: '150', align: 'center' },
            { prop: 'prevDasl', label: '同期值', minWidth: '150', align: 'center' },
            { prop: 'tbDasl', label: '同比', minWidth: '150', align: 'center' }
          ]
        },
        {
          label: '电子健康档案建档率',
          align: 'center',
          children: [
            { prop: 'jdsl', label: '本期值', minWidth: '150', align: 'center' },
            { prop: 'prevJdsl', label: '同期值', minWidth: '150', align: 'center' },
            { prop: 'prevJdl', label: '同比', minWidth: '150', align: 'center' }
          ]
        }
      ]
    }
  },
  methods: {
    /* 导出excel*/
    onExcelExport() {
      console.time('下载时间')
      this.excel = {
        filename: '测试用例' + `_${Number(new Date())}`,
        sheet: [
          {
            multiHeader: [
              ['序号', '机构名称', '辖区内常住居民数', '建立电子健康档案数', '', '', '电子健康档案建档率', '', ''],
              ['', '', '', '本期值', '同期值', '同比', '本期值', '同期值', '同比']
            ],
            table: new Array(100000).fill('').map((v, i) => ({ ...v, index: i + 1 })),
            keys: ['index', 'mc', 'czrksl', 'dasl', 'prevDasl', 'tbDasl', 'jdsl', 'prevJdsl', 'prevJdl'],
            globalStyle: {
              fill: {
                horizontal: 'center'
              },
              font: {
                name: 'Arial',
                sz: 10
              }
            },
            merges: ['D1:F1', 'G1:I1', 'A1:A2', 'B1:B2', 'C1:C2'],
            cellStyle: [
              ...[
                'A1',
                'B1',
                'C1',
                'D1',
                'E1',
                'F1',
                'G1',
                'H1',
                'I1',
                'A2',
                'B2',
                'C2',
                'D2',
                'E2',
                'F2',
                'G2',
                'H2',
                'I2'
              ].map((v) => ({
                cell: v,
                fill: {
                  fgColor: { rgb: 'c0c0c0' },
                  horizontal: 'center'
                }
              }))
            ]
          }
        ]
      }
      this.$nextTick(() => {
        this.$refs.excelExport.pikaExportExcel()
        console.timeEnd('下载时间')
      })
    },

    /* 导出excel 错误*/
    onExportExcelError(err) {
      this.$message.error(err.toString())
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  background: #fff;
}
</style>
